<div class="form-group">
    <label <if condition="$item['extra']['required']">class="required"</if>>{$item.title}</label>
    <div>
      <div class="teamavatar-box">
          <input type="hidden" name="{$item.name}" <if condition="$item['value'] eq ''">value="1"<else />value="{$item.value}"</if>>
          <for start="1" end="43">
              <if condition="$item['value'] eq ''">
                  <div <if condition="$i eq '1'">class="item active"<else />class="item"</if> data-id="{$i}">
                      <img src="{$i|getteamavatar}" alt="">
                  </div>
              <else />
                  <div <if condition="$i eq $item['value']">class="item active"<else />class="item"</if> data-id="{$i}">
                      <img src="{$i|getteamavatar}" alt="">
                  </div>
              </if>

          </for>
      </div>
    </div>
</div>
<style media="screen">
    .teamavatar-box{
        overflow: hidden;
        width: 450px;
    }
    .teamavatar-box .item{
        float: left;
        height: 45px;
        position: relative;
        width: 45px;
        cursor: pointer;
    }
    .teamavatar-box .item img{
      border: 3px solid #fff;
      height: 42px;
      padding: 1px;
      width: 42px;
    }
    .teamavatar-box .item.active img,.teamavatar-box .item:hover img{
      border-color: #3db1fa;
    }
</style>
<script type="text/javascript">
    $(".teamavatar-box .item").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
        $("input[name={$item.name}]").val($(this).data("id"));
    })
</script>
